<template>
	<view>
		<image class="logo ww100" src="@/static/image/fashi.jpg" mode="aspectFill"></image>
		<view class="content p20">
			<view class="item mb40">
				<view class="f32">联系人姓名：</view>
				<input class="mt20" type="text" v-model="name" placeholder="请输入姓名" />
			</view>
			<view class="item mb40">
				<view class="f32">联系人电话：</view>
				<input class="mt20" type="number" v-model="phone" :maxlength="11" placeholder="请输入联系电话" />
			</view>
			<view class="item mb40">
				<view class="f32">身份证号：</view>
				<input class="mt20" type="idcard" v-model="card" :maxlength="18" placeholder="请输入身份证号" />
			</view>
			<view class="item mb40">
				<view class="f32">入寺事项：</view>
				<picker class="mt20" mode="selector" :value="index" :range="list" @change="setAct('index', $event)">
					<view class="d-b-c pickerView">
						<view v-if="index > -1">{{ list[index] }}</view>
						<view class="gray9" v-else>请选择入寺事项</view>
						<u-icon name="arrow-down" color="#333" size="15"></u-icon>
					</view>
				</picker>
			</view>
			<view class="item mb40">
				<view class="f32">预约日期：</view>
				<picker class="mt20" mode="date" @change="setAct('date', $event)">
					<view class="d-b-c pickerView">
						<view v-if="date">{{ date }}</view>
						<view class="gray9" v-else>请选择日期</view>
						<u-icon name="arrow-down" color="#333" size="15"></u-icon>
					</view>
				</picker>
			</view>
			<view class="item mb40">
				<view class="f32">预约时间段：</view>
				<picker class="mt20" mode="selector" :value="dIndex" :range="dates" @change="setAct('dIndex', $event)">
					<view class="d-b-c pickerView">
						<view v-if="dIndex > -1">{{ dates[dIndex] }}</view>
						<view class="gray9" v-else>请选择时间段</view>
						<u-icon name="arrow-down" color="#333" size="15"></u-icon>
					</view>
				</picker>
			</view>
			<u-button text="提交信息" shape="circle" color="#DA2424" @click="send"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "",
				phone: "",
				card: "",
				list: ['招募', '法令', '礼法', '义工', '其他'],
				index: -1,
				date: '',
				dates: ['上午', '下午'],
				dIndex: -1
			};
		},
		methods: {
			async send() {
				if (this.name == '') return this.$showToast("请输入姓名")
				if (this.phone == '') return this.$showToast("请输入电话")
				if (this.card == '') return this.$showToast("请输入身份证号")
				if (this.index == -1) return this.$showToast("请选择入寺事项")
				if (this.date == '') return this.$showToast("请选择预约日期")
				if (this.dIndex == '') return this.$showToast("请选择预约时间段")
				const res = await this.$request({
					url: this.$api.conversion,
					data: {
						name: this.name,
						phone: this.phone,
						card: this.card,
						list: this.list[this.index],
						date: this.date,
						dates: this.dates[this.dIndex]
					}
				})
				this.$showToast(res.msg)
				if (res.code == 0) {
					setTimeout(() => uni.navigateBack(), 1000)
				}
			},
			setAct(name, e) {
				// console.log(name, e.detail);
				this[name] = e.detail.value;
			},
		}
	};
</script>

<style scoped lang="scss">
	::v-deep .u-upload__button {
		margin: 0 !important;
	}

	.logo {
		height: 400rpx;
	}

	.item {

		input,
		picker,
		.picker {
			background-color: #f7f7f7;
			height: 80rpx;
			padding: 0 40rpx;
			box-sizing: border-box;

			.pickerView {
				height: 80rpx;
			}
		}
	}
</style>